<template>
    <div>
        <a-modal
        :title="submitModalData.title"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirm-loading="confirmLoading"
        :width="1000"
        :destroyOnClose="true"
        >
            <div>
                <a-form ref="form" :form="form" >
                    <a-form-item>
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <div>
                                <span>审评依据列表查询：</span>
                                <!-- <a-button @click="selecToftenUse('同意')" size="small" style="margin: 0 8px;color: #2F54EB;">同意</a-button>
                                <a-button @click="selecToftenUse('不同意')" size="small" style="color: #2F54EB;">不同意</a-button>
                                <a-button @click="selecToftenUse('已阅')" size="small" style="margin: 0 8px;color: #2F54EB;">已阅</a-button> -->
                                <a-button @click="selecToftenUse()" size="small" style="color: #2F54EB;" icon="ellipsis"></a-button>
                            </div>
                            <a-button @click="addOpinion" size="small" icon="plus">添加到审评依据列表</a-button>
                        </div>
                        <a-textarea 
                            v-model:value="formState.fmbnr"
                            v-decorator="['fmbnr',{ initialValue:formState.fmbnr, rules: rules.fmbnr}]"
                            placeholder="请输入审评依据"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item>
                </a-form>
                <a-drawer
                    title="审评依据列表"
                    placement="right"
                    :closable="false"
                    :visible="drawerVisible"
                    @close="drawerVisible = false"
                    :width="300"
                    >
                        <div>
                            <a-input-search
                                :key="inputSearchKey"
                                placeholder="请输入内容"
                                enter-button="搜索"
                                size="small"
                                @search="onSearchOpinion"
                            />
                        </div>
                        <a-list :data-source="opinionsList" :loading="loading">
                            <a-list-item slot="renderItem" slot-scope="item, index">
                                <div @click="selelctOptitonText(item.fmbnr)">{{ item.fmbnr }}</div>
                                <div slot="actions">
                                    <a-icon @click="deleteOpinion(item)" type="delete" />
                                </div>
                            </a-list-item>
                        </a-list>
                    </a-drawer>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    handlingOpinionsListServe,
    deleteBatchIdeaServe,
    spcyaddJcyj,
    spcygetJcyj,
    spcydeleteJcyj,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            drawerVisible:false,
            inputSearchKey:null,
            loading:false,
            opinionsList:[],
            opinionsData:{
                title:'办理意见',
                fmbnr:'',
                valueData:{},//填写完意见后获取意见到页面后方法返回的第二个参数
                opinionType:'',//意见类型
                isJudgeAfterClosing:true,//经过页面接口成功后才关闭窗口
            },
            submitModalData:{},
            formState:{fmbnr:''},
            form: this.$form.createForm(this, { name: 'processingConditionsFromName' }),
            rules:{
                fmbnr: [{
                    required: true,
                    message: '请输入办理意见',
                    trigger: 'blur',
                }],
            },
            confirmLoading:false,
        }
    },
    watch:{

    },
    mounted(){
        this.submitModalData = JSON.parse(JSON.stringify(this.opinionsData))
    },
    methods:{
        getData(val){
            this.submitModalData = {...JSON.parse(JSON.stringify(this.opinionsData)),...val}
            this.formState.fmbnr = this.submitModalData.fmbnr
            this.form.setFieldsValue({
                fmbnr:this.submitModalData.fmbnr
            });
        },
        selecToftenUse(val){
            if(val){
                this.form.setFieldsValue({
                    fmbnr:val,
                });
                this.formState.fmbnr = val
            }else{
                this.inputSearchKey = Date.now()
                this.drawerVisible = true
                this.getOpinionList(this.submitModalData)
                
            }
        },
        onSearchOpinion(val){
            //console.log('搜索内容',val)
            this.getOpinionList(this.submitModalData,val)
        },
        getOpinionList(val,fmbnr){
            this.loading = true
            let data = {}
            if(fmbnr){
                data = {pageNo:1,pageSize:100000,fmbnr:fmbnr,sqsxid:this.submitModalData.valueData.sqsxid}
            }else{
                data = {pageNo:1,pageSize:100000,sqsxid:this.submitModalData.valueData.sqsxid}
            }
            spcygetJcyj(data).then(res=>{
                if(res.code == 200){
                    this.opinionsList = res.result.records
                }
                this.loading = false
            })
        },
        addOpinion(){
            if(this.formState.fmbnr){
                spcyaddJcyj({sqsxid:this.submitModalData.valueData.sqsxid,fmbnr:this.formState.fmbnr}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$message.warning('当前输入框无内容')
            }
        },
        deleteOpinion(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                onOk() {
                    spcydeleteJcyj({id:val.id,sqsxid:that.submitModalData.valueData.sqsxid}).then(res=>{
                        if(res.code == 200){
                            that.getOpinionList(that.submitModalData)
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
            
        },
        selelctOptitonText(val){
            this.formState.fmbnr = val
            this.form.setFieldsValue({
                fmbnr:val
            });
            this.drawerVisible = false
        },
        confirmLoadinghandle(val){//确定按钮状态
            this.confirmLoading = val
        },
        handleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    this.$emit('getInputOpinion',values.fmbnr,{opinionType:this.submitModalData.opinionType,...this.submitModalData.valueData})
                    this.visible = this.submitModalData.isJudgeAfterClosing
                    this.confirmLoading = true
                }
            })
            
        },
        handleCancel(){
            this.visible = false
        },
    }
}
</script>